<template>
  <el-dialog :visible.sync="seeInfoDia" width="50%" :close-on-click-modal="false" :close-on-press-escape="false"
    :show-close="false" destroy-on-close>
    <!-- v-if="tabsIndex == 5" -->
    <el-row>
      <el-col :span="24">
        <el-descriptions title="基本信息" :column="3" border colon>
          <el-descriptions-item label="活动主题">{{ tongInfo.activityTheme ? tongInfo.activityTheme : "--"
          }}</el-descriptions-item>

          <el-descriptions-item label="活动类型">{{ tongInfo.activityType ? typeArr[tongInfo.activityType - 1] : "--"
          }}</el-descriptions-item>

          <el-descriptions-item label="发布状态">{{ tongInfo.draftsStatus ? tongInfo.draftsStatus : "-" }}
          </el-descriptions-item>

          <el-descriptions-item label="开始时间">{{ tongInfo.activityStartTime ? tongInfo.activityStartTime : "--"
          }}</el-descriptions-item>

          <el-descriptions-item label="结束时间">
            {{ tongInfo.activityEndTime ? tongInfo.activityEndTime : "--"
            }}</el-descriptions-item>

          <el-descriptions-item label="活动地点">
            {{ tongInfo.activityPlace ? tongInfo.activityPlace : "--" }}
          </el-descriptions-item>

          <el-descriptions-item label="参与人员">
            <span style="margin-right: 6px;" v-for="(i, index) in tongInfo.participant" :key="index">{{ i.name }}</span>
          </el-descriptions-item>

          <el-descriptions-item label="活动内容">{{ tongInfo.activityContent ? tongInfo.activityContent :
            "--" }}</el-descriptions-item>

          <el-descriptions-item label="封面">
            <div v-if="tongInfo.coverUrl">
              <el-image v-for="(i, index) in tongInfo.coverUrl" :key="index" style="width: 100px; height: 100px" :src="i"
                :preview-src-list="tongInfo.coverUrl">
              </el-image>
            </div>
          </el-descriptions-item>

          <el-descriptions-item label="附件">
            <span style="cursor: pointer;" v-for="(i, index) in tongInfo.accessoryUrl" :key="index" @click="seeFile(i)">{{
              i.accessoryName
            }}</span>
          </el-descriptions-item>

          <el-descriptions-item label="创建时间">{{ tongInfo.createTime ? tongInfo.createTime :
            "--" }}</el-descriptions-item>

          <el-descriptions-item label="签到二维码" v-if="!isFalse">
            <div v-if="tongInfo.qrCodeUrl">
              <el-image style="width: 100px; height: 100px" :src="tongInfo.qrCodeUrl">
              </el-image>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleClose">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { serverUrl } from "@/look";
import { Base64 } from "js-base64";

export default {
  props: {
    seeInfoDia: {
      type: Boolean,
      default: false,
    },
    tongInfo: {
      type: Object,
      default: () => { },
    },
    tabsIndex: {
      type: Number
    },
  },
  data() {
    return {
      isFalse: false,
      typeArr: [
        "党员大会",
        "支部委员会",
        "党小组会",
        "党课",
        "党员统一活动日",
        "特色活动"
      ]
    };
  },

  created() {
  },
  mounted() {
  },

  methods: {
    // 预览附件
    seeFile(i) {
      window.open(
        serverUrl +
        "onlinePreview?url=" +
        encodeURIComponent(Base64.encodeURI(i.accessoryUrl))
      );
    },

    handleClose() {
      this.$emit("tongzhi-close", this.tongInfo.title);
    },

    // 查看详细信息
    seeInfo(row) {
      this.$emit("tongzhi-seeInfo", row);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  padding: 10px !important;
}

::v-deep .el-dialog__header {
  border: none !important;
}
</style>
